<template>
    <div class="order_box">
      <!-- <Loading v-show="LOADING"></Loading> -->
      <nav-com title="确认下单" :showView="showView" @back="backHandler()"></nav-com>
      <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
        <div class="top-header">
        <!-- 地址 -->
        <div class="group_add" style="min-height: 22.66vw; hieght: auto">
          <div class="pay_title">
            收货信息
          </div>
          <div v-if="addressDetail == null" @click="edit" class="pay_add">
            <img src="../../assets/add.png" />
            <p>添加收货地址</p>
          </div>
          <div v-else @click="edit" class="pay_add_success">
            <div class="pay_add_right">
              <div style="color: #999">
                {{ addressDetail.province_name }}{{ addressDetail.city_name
                }}{{ addressDetail.area_name }} {{ addressDetail.address }}
              </div>
              <div style="display: flex">
                <p style="font-size:13px;">{{ addressDetail.consignee }}</p>|
                <span style="color: #999; margin-left: 2.6vw; padding-top: 0.5vw">{{ addressDetail.phone }}</span>
              </div>
            </div>
          </div>
        </div>
        </div>
        <div class="group_add" style="height: auto">
          <div class="pay_title">
            商品信息
          </div>
          <div class="pay_product">
                <div class="goods-tu">
                <img :src="details.image" />
                </div>
                <div class="goods-info">
                    <div class="name">
                      <div class="t0">{{details.title}}</div>
                      <div class="t1">¥{{details.price}}</div>
                    </div>
                    <div class="num">数量：1</div>
                    <div class="statis">价格：￥{{ details.price }}</div>
                </div>
            </div>
          <!-- <div class="pay_product">
            <img :src="details.image" />
            <div class="pay_pr_title">
              <div calss="name">
                <div class="t0">{{ details.title }}</div>
                  <div class="t1"> ￥{{ details.price }}</div>
              </div>
              <div style="color: #ccc">数量：1</div>
              <div>￥{{ details.price }}</div>
            </div>
          </div> -->
          <div class="pay_content">
            <div class="content_border"></div>
            <div>
              <!-- <ul class="content_text">
                  <li style="margin-top: 6vw; padding-bottom: 3vw">
                    <p>惊爆零售价</p>
                    <span>¥ {{ details.price }}</span>
                  </li>
                </ul> -->
            </div>
          </div>
        </div>
      </van-pull-refresh>
      <div class="card3_bottom" v-if="selFlag != 3">
        <div class="card3_display">
          <van-button @click="receive()" loading-text="购买中..." class="card3_btn">立即领取</van-button>
        </div>
      </div>
    </div>
  </template>
  <script>
  import sel from "../../assets/sel.png";
  import seled from "../../assets/seled.png";
  import {
    friendgoodsdetail,
    getAdressManagesAPI2,
    goodsreceive
  } from "@/api/api";
  import { codeLists, writeoff } from "../../api/myExaminatonGaper";
  import navCom from "@/component/nav";
  import Loading from "@/component/loading";
  import { Toast } from "vant";
  import goBackEntity from "@/utils/eventBus.js";

  export default {
    name: "pay",
    components: {
      navCom,
      Loading,
    },
    data() {
      return {
        id: "",

        payPassWordShow: false,//显示支付密码
        payPassWordConfirm:false,
        payPassWordTitle: "输入支付密码",
        payPassWordCenter: "您还未设置支付密码，请先设置您的支付密码",
        payPassWordInfo:"",
        showKeyboard: false,
        payPassWord: "",
        payPassWordIs:false,

        splitShow: false,
        showView: true,
        details: {},
        selFlag: 0,
        sel: sel,
        seled: seled,
        checkedId: 0,
        show: false,
        checked: false,
        loadingFlag: false,
        addressDetail: null,
        uid: weixin.getUserId(),
        addressId: null,
        itemid: null,
        borderColor: "1px solid #F7541C",
        backgroundColor: "#FFF7F0",
        tab: 1,
        isLoading: false,
        LOADING: false,
        arr: [],
        order_sn: "",
        one_day: 0,
        has_order: false
      };
    },

    async mounted() {
      this.orderInit();
      // this.getPayPassWord()
    },
    async created() {
      this.has_order = this.$route.params["has_order"] || false;
      this.order_sn = this.$route.params["order_sn"] || "";
    },
    methods: {
      choose(val) {
        this.arr.map((ele) => (ele.check = false));
        val.check = true;
        this.checkedId = val.id;
        this.arr = this.arr;
      },
      closed() {
        this.checkedId = 0;
        this.show = false;
        this.arr = this.arr.map((ele) => ({ ...ele, check: false }));
        this.selFlag = 1;
      },
      //返回
      backHandler() {
          this.$router.go(-1);
      },
      onRefresh() {
        this.orderInit();
        this.isLoading = false;
      },
      //微信初始化
      orderInit() {
        this.id =  this.$route.params.id;

        if(this.$route.params.id){
          localStorage.setItem("goods_id_share",this.$route.params.id)
        }
        if(this.$route.params.r_id){
          localStorage.setItem("r_id_share",this.$route.params.id)
        }
        console.log("======localStorage.getItem(\"goods_id_share\")",localStorage.getItem("goods_id_share"))
        this.order_sn = this.$route.params.order_sn;
        friendgoodsdetail({ id: localStorage.getItem("goods_id_share") }).then((res) => {
            this.details = res.data.data;
            this.one_day = res.data.data.one_day || 0;
          });
        this.init()
      },
      //获取数据地址
      init() {
        var addressId = this.$wweixin.getItem("addressId");

        getAdressManagesAPI2().then((res) => {
          console.log("getAdressManagesAPI2", res);
          let addressList = res.data.data;
          if (addressList.length > 0) {
            for (const address of addressList) {
              if (address.id == parseInt(addressId)) {
                this.addressDetail = address;
                localStorage.removeItem("addressId");
                return;
              } else if (address.is_default == 1) {
                this.addressDetail = address;
                return;
              }
            }
          } else {
            this.addressDetail = addressList[0];
            return;
          }
        });
      },
      //添加收货地址
      add() {
            console.log("add");
            // this.$router.push("/add");
            this.$router.push({
                name: "add",
                params: this.$route.params
            });
        },
        //修改收货地址
        edit() {
            this.$router.push("/receiptList");
        },
      //选择
      receive(){
        goodsreceive({
          r_id:localStorage.getItem("r_id_share"),
          address_id: this.addressDetail.id,
          num:1,
         }).then((res) => {
           if(res.data.code==1){
               this.$dialog.alert({
                  title: '商品领取成功',
                  message: '下载APP可以查看详情信息',
                  showCancelButton: true
                }).then((result) => {
                  this.$router.push("/shareList");
                }).catch((err) => {});

           }else{
             Toast(res.data.msg)
           }
          });

      }
    }
  };
  </script>
  <style scoped>
  /deep/ .van-password-input__security {
    justify-content: space-around;
  }

  /deep/ .van-password-input__security li {
    max-width: 36px !important;
    max-height: 36px !important;
    background-color: #EFEFEF;
  }

  /deep/ .van-password-input__info {
    color: #333333;
    font-size: 14px;
  }

  /deep/ .van-hairline--surround::after {
    border-width: 1px;
    border: 0 solid transparent;
  }

  /deep/ .van-number-keyboard {
    z-index: 10000;
  }
  .payPassWord {
    width: 80vw;
    padding: 20px 10px;
  }

  </style>
  <style scoped>
  /* 共用 */
  p {
    margin: 0;
    padding: 0;
  }

  html,
  body,
  #app,
  .order_box {
    height: 100%;
    overflow: hidden;
  }

  .order_box {
    background: #f2f2f2;
    height: auto;
    min-height: 100vh;
  }
  .top-header{
    background: linear-gradient(180deg, #EF4134 0%, #F8F8F8 100%);
    margin-top: -10px;
    padding-top: 10px;
  }
  .group_add {
    width: 94.66vw;
    margin-top: 2.6vw;
    margin-left: 2.6vw;
    border-radius: 2.6vw;
    background: #fff;
  }
  .orderSty,.shareSty{
    padding: 10px 9px;
    display: flex;
  }
  .orderSty .name,.shareSty .name{
    font-size: 14px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #222222;
    line-height: 20px;
  }
  .orderSty .divSty {
    display: flex;
  }
  .orderSty .divSty .radiosel{
    font-size: 13px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #222222;
    line-height: 18px;
    display: flex;
    align-items: center;
    margin-right: 10px;
  }
  .shareSty .divSty{
    font-size: 13px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #47474C;
line-height: 18px;
flex:1;
  }
  .orderSty .divSty .radiosel img{
    width: 18px;
    height: 18px;
    margin-right: 5px;
  }
  .card3_bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 18.66vw;
    background: #fff;
    height: 18.66vw;
  }

  .card3_display {
    margin: 3.3vw;
    width: auto;
  }

  .card3_bottom .card3_btn {
    width: 94.66vw;
    height: 12vw;
    line-height: 12vw;
    font-size: 4vw;
    background: #d62f34;
    border-radius: 6vw;
    text-align: center;
    color: #fff;
  }

  .pay_add {
    padding-top: 8.4vw;
    display: flex;
  }

  .pay_add img {
    width: 4.53vw;
    height: 5.86vw;
    padding-left: 34vw;
  }

  .pay_add p {
    padding-left: 2.6vw;
    font-size: 3.4vw;
    color: #333;
  }

  .pay_add_success {
    display: flex;
    padding:10px 0;
  }

  .pay_add_success img {
    width: 4.53vw;
    height: 5.86vw;
    padding-left: 2.6vw;
    padding-top: 8.4vw;
  }

  .pay_add_success .pay_add_right {
    font-size: 13px;
    margin-left: 2.6vw;
  }

  /* 详情 */
  .pay_title {
    margin-left: 3vw;
    padding-top: 2.6vw;
    padding-bottom: 2.6vw;
    font-size: 4vw;
     border-bottom: 1px solid #E7E7E7;
     font-weight: 550;

  }
  .pay_product{
    display: flex;
    padding: 10px;
  }
  .pay_product  .goods-tu {
  width: 64px;
  height: 64px;
  margin-right: 8px;
}
.pay_product .goods-tu img {
  width: 64px;
  height: 64px;
  border-radius: 8px;
}
.pay_product .goods-info{flex:1}
.pay_product .goods-info .name {
  font-size: 13px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #222222;
  line-height: 18px;
  display: flex;
  justify-content: space-between;
}

.pay_product .goods-info .name .t0{
  font-weight: 550;
  /* text-overflow: -o-ellipsis-lastline;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;	 */
}
.pay_product .goods-info .num{
  font-size: 13px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #999999;
line-height: 20px;
}
.pay_product .goods-info .statis{
  font-size: 13px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #999999;
line-height: 20px;
}
  .cont_color_title {
    margin-left: 3vw;
    padding-top: 2.6vw;
    font-size: 4vw;
  }

  .cont_color_list {
    display: flex;
    justify-content: space-around;
    margin: 3vw;
    padding-bottom: 5vw;
  }

  .cont_color_list li {
    display: flex;
    width: auto;
    border: 1px solid #f6f6f6;
    border-radius: 1.3vw;
  }

  .cont_color_list li img {
    width: 6.667vw;
    height: 6.667vw;
    margin: 1.3vw;
  }

  .cont_color_list li p {
    font-size: 3.2vw;
    line-height: 6.667vw;
    margin-top: 1.3vw;
    margin-right: 1.3vw;
  }

  /* 办理方式 */
  .content_border {
    border-top: 1px solid #e1e1e1;
    margin: 2.6vw;
  }

  .pay_content .content_text li {
    display: flex;
    justify-content: space-between;
  }

  .pay_content .content_text li p {
    font-size: 3.2vw;
    color: #999;
    height: 6vw;
    line-height: 6vw;
    margin-left: 2.6vw;
  }

  .pay_content .content_text li span {
    font-size: 4vw;
    color: #d62f34;
    height: 6vw;
    line-height: 6vw;
    margin-right: 2.6vw;
  }

  /*支付方式*/
  .pay_list {
    margin-top: 4vw;
  }

  .pay_list li {
    display: flex;
    justify-content: space-between;
  }

  .pay_icon {
    display: flex;
    height: 12vw;
  }

  .pay_icon img {
    width: 5.3vw;
    height: 5.3vw;
    margin-left: 2.6vw;
  }

  .pay_icon p {
    padding-left: 2.6vw;
  }

  .pay_sel img {
    width: 4vw;
    height: 4vw;
    margin-right: 2.6vw;
  }

  .bottom_btn {
    display: flex;
    /*width: 374px;*/
    height: 16vw;
    text-align: center;
    line-height: 16vw;
    font-size: 4.5vw;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #ffffff;
    background: #f86831;
  }

  .bottom_btn_left {
    width: 50vw;
    background: #c1c1c1;
  }

  .bottom_btn_right {
    flex: 1;
  }

  .list {
    width: 93.6vw;
    margin: 0 auto;
    /* padding-top: 8vw; */
  }

  .list_item {
    background: url("~@/assets/pay_quan_bg.png");
    background-size: cover;
    width: 93.6vw;
    box-sizing: border-box;
    display: flex;
    height: 21vw;
    padding-right: 3.2vw;
    margin-bottom: 4vw;
  }

  .list_item_left {
    width: 29.3vw;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .list_item_right {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    /*justify-content: center;!**!*/
  }

  .right_left {
    padding-left: 3.2vw;
  }

  .right_left_title {
    font-size: 4.53vw;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
  }

  .right_left_time {
    margin-top: 3.2vw;
    font-size: 3.2vw;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #a1a1a1;
  }

  .left_unit {
    color: #fff;
    font-size: 4.5vw;
  }

  .left_price {
    color: #fff;
    font-size: 6.4vw;
  }

  .scroll {
    max-height: 300px;
    overflow-x: hidden;
  }

  .van-popup--bottom {
    padding-top: 20px !important;
  }

  .splitPopup {
    width: 327px;
    height: 230px;
    padding: 15px;
    background-image: url(../../assets/cdbg.png);
    background-repeat: round;
    display: flex;
    flex-direction: column;
    /* align-items: center; */
  }

  .tips {
    width: 233px;
    height: 44px;
    font-size: 13px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 600;
    color: #8b2100;
    line-height: 22px;
    padding-left: 5px;
  }

  .splitTypes {
    display: flex;
    margin-top: 5vh;
    justify-content: space-around;
    align-items: center;
    height: 200px;
  }

  .splitTypes .item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .splitTypes .item .title {
    width: 39px;
    height: 18px;
    font-size: 13px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #aa6c54;
    line-height: 18px;
  }

  .splitTypes .item .money {
    height: 60px;
    font-size: 27px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
    line-height: 60px;
  }

  .splitTypes .item .btn {
    width: 99px;
    height: 29px;
    line-height: 29px;
    background: linear-gradient(180deg, #e48e5c 0%, #c4552f 100%);
    border-radius: 15px;
    text-align: center;
    color: white;
  }

  .splitTypes .item .zfzbtn {
    width: 99px;
    height: 29px;
    border-radius: 15px;
    border: 1px solid #d26e43;
    color: #d26e43;
    line-height: 29px;
  }

  .splitTypes .item .yzfbtn {
    width: 99px;
    height: 29px;
    border-radius: 15px;
    border: 1px solid #d1d2d5;
    color: #666666;
    line-height: 29px;
  }


  </style>
